import React, { FC } from 'react'
import { Typography, Space, message } from 'antd'
import { UserAddOutlined } from '@ant-design/icons'
import { Link, useNavigate } from 'react-router-dom'
const { Title } = Typography

import { LOGIN_PATHNAME } from '../../router/index'
import style from './Registry.module.scss'
import { Button, Form, Input } from 'antd'
import { registerService } from '../../service/users'
import { useRequest } from 'ahooks'
const Registry: FC = () => {
  const nav = useNavigate()

  type FieldType = {
    username?: string
    password?: string
    ConfirmPassword?: string
    nickName?: string
  }
  const { loading, run } = useRequest(
    async values => {
      const { username, password, nickName } = values
      const data = await registerService(username, password, nickName)
      return data
    },
    {
      manual: true,
      onSuccess: () => {
        message.success('注册成功')
        nav('/login')
      },
    }
  )
  const onFinish = (value: any) => {
    console.log('hello world', value)
    run(value)
  }
  const onFinishFailed = () => {}
  return (
    <div className={style.container}>
      <Space>
        <Title level={2}>
          <UserAddOutlined></UserAddOutlined>
        </Title>
        <Title level={2}>注册新用户</Title>
      </Space>
      <div>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="用户名"
            name="username"
            rules={[
              { required: true, message: 'Please input your username!' },
              { type: 'string', min: 5, max: 20, message: '字符长度必须在5-20' },
              { pattern: /^\w+$/, message: '必须是字母数字或者下划线' },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item<FieldType>
            label="确认密码"
            name="ConfirmPassword"
            rules={[
              { required: true, message: 'Please input your password!' },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  console.log('hello ', value)
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve()
                  } else {
                    return Promise.reject(new Error('两次密码不一致'))
                  }
                },
              }),
            ]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item<FieldType>
            label="昵称"
            name="nickName"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Space>
              <Button type="primary" htmlType="submit" loading={loading}>
                注册
              </Button>
              <Link to={LOGIN_PATHNAME}>已有账户，请登录</Link>
            </Space>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
export default Registry
